<template>
  <div class="main">
    <div>
      <eagle-cell-group :border="border">
        <eagle-row class="rowTitle">
          <eagle-col span="8" class="col_text_left"
            ><span class="spanTitle1">风险点名称</span>
          </eagle-col>
          <eagle-col span="16"
            ><span class="spanValue">{{ form.RiskPointName }}</span></eagle-col
          >
        </eagle-row>
        <eagle-row class="rowTitle">
          <eagle-col span="8" class="col_text_left"
            ><span class="spanTitle1">部门</span>
          </eagle-col>
          <eagle-col span="16"
            ><span class="spanValue">{{ form.OrgName }}</span></eagle-col
          >
        </eagle-row>
        <eagle-row class="rowTitle">
          <eagle-col span="8" class="col_text_left"
            ><span class="spanTitle1">风险类型</span>
          </eagle-col>
          <eagle-col span="16"
            ><span class="spanValue">{{ form.RPTypeName }}</span></eagle-col
          >
        </eagle-row>
        <eagle-row class="rowTitle">
          <eagle-col span="8" class="col_text_left"
            ><span class="spanTitle1">作业活动</span>
          </eagle-col>
          <eagle-col span="16"
            ><span class="spanValue">{{ form.Activity }}</span></eagle-col
          >
        </eagle-row>
      </eagle-cell-group>
    </div>
    <div class="mt-10">
      <eagle-collapse v-model="activeNames">
        <eagle-collapse-item title="危险源辨识" name="1">
          <eagle-row class="rowBack">
            <eagle-row>
              <eagle-col span="8" class="col_text_left"
                ><span class="spanTitle">危险源</span>
              </eagle-col>
              <eagle-col span="16"
                ><span class="spanValue">{{
                  form.DangerousSource
                }}</span></eagle-col
              >
            </eagle-row>
            <eagle-row>
              <eagle-col span="8" class="col_text_left"
                ><span class="spanTitle">潜在后果</span>
              </eagle-col>
              <eagle-col span="16"
                ><span class="spanValue">{{
                  form.LatentConsequencesName
                }}</span></eagle-col
              >
            </eagle-row>
            <eagle-row>
              <eagle-col span="8" class="col_text_left"
                ><span class="spanTitle">事故类型</span>
              </eagle-col>
              <eagle-col span="16"
                ><span class="spanValue">{{ form.AccidentName }}</span></eagle-col
              >
            </eagle-row>
          </eagle-row>
        </eagle-collapse-item>
        <eagle-collapse-item title="固有风险评估" name="2">
          <eagle-row class="rowBack">
            <eagle-row class="riskLevel">
              <eagle-col span="8" class="col_text_left"
                ><span class="spanTitle">风险等级</span>
              </eagle-col>
              <eagle-col span="16">
                <span
                  v-bind:class="{
                    riskLevel1: form.EvaluationName == '重大风险',
                    riskLevel2: form.EvaluationName == '较大风险',
                    riskLevel3: form.EvaluationName == '一般风险',
                    riskLevel5:
                      form.EvaluationName == '低风险' ||
                      form.EvaluationName == '稍有危险',
                  }"
                  >{{ form.EvaluationName }}</span
                >
              </eagle-col>
            </eagle-row>
            <eagle-row>
              <eagle-col span="8" class="col_text_left"
                ><span class="spanTitle">监控层级</span>
              </eagle-col>
              <eagle-col span="16"
                ><span class="spanValue">{{ form.ControlLevel }}</span></eagle-col
              >
            </eagle-row>
          </eagle-row>
        </eagle-collapse-item>
        <eagle-collapse-item title="诱导性原因分析" name="3">
          <eagle-row class="rowBack">
            <eagle-row v-for="(item, index) in form.InducedCauses" :key="index">
              <eagle-col span="24">
                <span class="spanValue">
                  {{ item }}
                </span>
              </eagle-col>
            </eagle-row>
          </eagle-row>
        </eagle-collapse-item>
        <eagle-collapse-item title="控制措施" name="4">
          <eagle-row class="rowBack">
            <eagle-row v-for="(item, index) in form.ControlMeasures" :key="index">
              <eagle-col span="24">
                <span class="spanValue">
                  {{ item }}
                </span>
              </eagle-col>
            </eagle-row>
          </eagle-row>
        </eagle-collapse-item>
        <eagle-collapse-item title="参考相关法律法规或标准" name="5">
          <eagle-row class="rowBack">
            <eagle-row v-for="(item, index) in form.LawReferences" :key="index">
              <eagle-col span="24">
                <span class="spanValue">
                  {{ item }}
                </span>
              </eagle-col>
            </eagle-row>
          </eagle-row>
        </eagle-collapse-item>
        <eagle-cell-group :border="border">
          <eagle-row class="rowTitle riskLevel">
            <eagle-col span="8" class="col_text_left"
              ><span class="spanTitle1">现状风险</span>
            </eagle-col>
            <eagle-col span="16">
              <span
                class="riskLevelnone"
                v-bind:class="{
                  riskLevel1: form.EvaluationResultName == '重大风险',
                  riskLevel2: form.EvaluationResultName == '较大风险',
                  riskLevel3: form.EvaluationResultName == '一般风险',
                  riskLevel5:
                    form.EvaluationResultName == '低风险' ||
                    form.EvaluationResultName == '稍有危险',
                }"
                >{{ form.EvaluationResultName }}</span
              >
            </eagle-col>
          </eagle-row>
        </eagle-cell-group>
      </eagle-collapse>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getDetail();
  },
  data() {
    return {
      id: this.$route.query.id,
      border: false,
      form: {},
      activeNames: ["1"],
    };
  },
  methods: {
    getDetail() {
      let _this = this;
      let params = { id: _this.id };
      _this.$axios
      .get("/RiskPointIdentify/GetDetail",{params:params})
      .then((res)=>{
        _this.form = res.data;
      })
    },
  },
};
</script>
<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
.col_text_left {
  text-align: left;
}
.spanTitle {
  font-size: 14px;
  color: #646566;
  width: 80px;
  padding-left: 10px;
  line-height: 30px;
  margin-right: 20px;
}
.spanTitle1 {
  font-size: 14px;
  color: #323233;
  width: 80px;
  padding-left: 10px;
  line-height: 30px;
  margin-right: 20px;
}
.spanValue {
  font-size: 14px;
  color: #969799;
  line-height: 28px;
}
.rowBack {
  background-color: #f8f9f9;
  padding: 8px;
}
.rowTitle {
  padding: 7px;
}
.riskLevel span {
  border-radius: 3px;
  font-size: 14px;
}
.riskLevel {
  line-height: 35px;

  .riskLevelnone {
    background: green;
  }

  .riskLevel1 {
    background: #ff0000;
    color: #ffffff;
    padding: 5px;
  }

  .riskLevel2 {
    background: #ffc000;
    color: #ffffff;
    padding: 5px;
  }

  .riskLevel3 {
    background: #ffff00;
    color: #ffffff;
    padding: 5px;
  }

  .riskLevel5 {
    background: #00b0f0;
    color: #ffffff;
    padding: 5px;
  }
}
</style>
